<template>
  <div class="bar-container">
    <el-form inline size="small">
      <el-form-item label="粒度">
        <el-radio-group
          v-model="config.dataGranularity"
          @change="handleGranularityChange()"
        >
          <el-radio-button :value="1">15分钟</el-radio-button>
          <el-radio-button :value="2">30分钟</el-radio-button>
          <el-radio-button :value="4">60分钟</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="步长">
        <el-radio-group v-model="config.dataStep" @change="handleStepChange()">
          <el-radio-button :value="1">15分钟</el-radio-button>
          <el-radio-button :value="2">30分钟</el-radio-button>
          <el-radio-button :value="4">60分钟</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="间隔">
        <el-radio-group
          v-model="config.dataInterval"
          @change="handleIntervalChange()"
        >
          <el-radio-button :value="1">15分钟</el-radio-button>
          <el-radio-button :value="2">30分钟</el-radio-button>
          <el-radio-button :value="4">60分钟</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="滚动条">
        <el-radio-group v-model="config.syncScroll">
          <el-radio-button :value="false">独立</el-radio-button>
          <el-radio-button :value="true">同步</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="纵坐标">
        <el-radio-group v-model="config.syncYaxisMax">
          <el-radio-button :value="false">自动</el-radio-button>
          <el-radio-button :value="true">最大</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <el-form inline size="small">
      <el-form-item>
        <el-button type="primary" @click="handleMgr">
          <el-icon><FolderOpened /></el-icon>
          <span>模板管理器</span>
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
// import { ref, computed, nextTick, watch, onMounted, onUnmounted, h } from "vue";

import useFlowStore from "@/store/flow.js";

const flowStore = useFlowStore();

const config = flowStore.chartConfig.freeChart;

const handleGranularityChange = () => {
  config.dataStep = config.dataGranularity;
  config.dataInterval = config.dataGranularity;
  handleChange();
};

const handleStepChange = () => {
  if (config.dataStep < config.dataInterval) {
    config.dataInterval = config.dataStep;
  }
  config.dataGranularity =
    config.dataStep == config.dataInterval ? config.dataStep : -1;
  handleChange();
};

const handleIntervalChange = () => {
  if (config.dataInterval > config.dataStep) {
    config.dataStep = config.dataInterval;
  }
  config.dataGranularity =
    config.dataInterval == config.dataStep ? config.dataInterval : -1;
  handleChange();
};

const emits = defineEmits(["change"]);

const handleChange = () => {
  emits("change");
};

const handleMgr = () => {
  config.showMgr = !config.showMgr;
};
</script>

<style scoped>
.bar-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
